<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <div>
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <!-- <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <!-- <button class="bg-red-500 hover:bg-red-700 ...">Hover me</button>
    <div
      class="
        max-w-md
        mx-auto
        bg-white
        rounded-xl
        shadow-md
        overflow-hidden
        md:max-w-2xl
      "
    >
      <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img
            class="h-48 w-full object-cover md:w-48"
            src="/img/store.jpg"
            alt="Man looking at item at a store"
          />
        </div>
        <div class="p-8">
          <div
            class="
              uppercase
              tracking-wide
              text-sm text-indigo-500
              font-semibold
            "
          >
            Case study
          </div>
          <a
            href="#"
            class="
              block
              mt-1
              text-lg
              leading-tight
              font-medium
              text-black
              hover:underline
            "
            >Finding customers for your new business</a
          >
          <p class="mt-2 text-gray-500">
            Getting a new business off the ground is a lot of hard work. Here
            are five ideas you can use to find your first customers.
          </p>
        </div>
      </div>
    </div>
    <div
      class="
        p-6
        max-w-sm
        mx-auto
        bg-white
        rounded-xl
        shadow-md
        flex
        items-center
        space-x-4
      "
    >
      <div class="flex-shrink-0">
        <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
      </div>
      <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-gray-500">You have a new message!</p>
      </div>
    </div>

    <div
      class="
        py-8
        px-8
        max-w-sm
        mx-auto
        bg-white
        rounded-xl
        shadow-md
        space-y-2
        sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6
      "
    >
      <img
        class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0"
        src="/img/erin-lindford.jpg"
        alt="Woman's Face"
      />
      <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button
          class="
            px-4
            py-1
            text-sm text-purple-600
            font-semibold
            rounded-full
            border border-purple-200
            hover:text-white hover:bg-purple-600 hover:border-transparent
            focus:outline-none
            focus:ring-2
            focus:ring-purple-600
            focus:ring-offset-2
          "
        >
          Message
        </button>
      </div>
    </div> -->
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
